<template>
	<view class="content">
		<view class="header">
			<icon type="search" size="12" class="iconSearch" v-show="flag"></icon>
			<input type="text" placeholder="拖把" @input="showValue">
		</view>
		<!-- 轮播图 -->
		<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true"> 
			<swiper-item v-for="(item,index) in dataSiwper" :key="index">
				<image :src="item.img" class="myimg"></image>
			</swiper-item>
		</swiper>

        <!-- 导航 -->
		<view class="nav">
            <view v-for="(item,index) in dataNav" :key="item.text" class="navlist">
				<image :src="item.img"></image>
				<view class="text">{{item.text}}</view>
			</view>
		</view>

		<!-- 列表 -->
        <product :dataProduct="dataProduct"></product>	
	</view>
</template>

<script>
    import product from "@/components/Product.vue";
	export default {
		data() {
			return {
				flag:true,
				dataSiwper:[],
				dataNav:[],
				dataProduct:[]
			}
		},
		onLoad() {

		},
		created () {
			this.getSwiper();
			this.getNav();
			this.getProduct();
		},
		methods: {
			showValue(val){
               if(val.detail.value.length==0){
				   this.flag=true;
				   console.log(this.flag);
			   }else{
				   this.flag=false;
			   }
			},
			getSwiper(){
				this.$myRequest({
					url:"/api/xiaomi/swiper"
				}).then(res=>{
					this.dataSiwper=res.data;
					//console.log(res);
				}).catch(err=>{
					console.log(err);
				})
			},
			getNav(){
				this.$myRequest({
					url:"/api/xiaomi/nav"
				}).then(res=>{
				    this.dataNav=res.data;
					//console.log(res);
				}).catch(err=>{
					console.log(err);
				})
			},
			getProduct(){
				this.$myRequest({
					url:"/api/xiaomi/productList"
				}).then(res=>{
					//没调用一次该方法，就往里面放入4条数据
				    this.dataProduct.push(...res.data);
					//console.log(this.dataProduct);
				}).catch(err=>{
					console.log(err);
				})
			}
		},
		components:{
			product
		},
		onReachBottom(){//触底加载更多
			this.getProduct();
		}
	}
</script>

<style>
	.header{
         width:100%;
		 height:120rpx;
		 background-color:#845F3F;
		 overflow:hidden;
		 position: relative;
	}
	.iconSearch{
       position: absolute;
	   left:41%;
	   top:47rpx;
	}
	.header input{
        width:80%;
		height:40rpx;
		margin:0 auto;
		margin-top:40rpx;
		border-radius: 20rpx;
		text-align: center;
		background-color: #fff;
	}
	.myimg{
		width:100%;
		height:400rpx;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		margin:10px 0px;
	}
	.nav image{
		width:80rpx;
		height:80rpx;
	}
	.nav .text{
        font-size:14px;
	}
</style>
